<!--
 * @Author: your name
 * @Date: 2020-10-08 17:08:27
 * @LastEditTime: 2021-04-20 15:57:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\Home.vue
-->
<template>
  <div class="home">
    <el-container>
      <el-header height="70px">
        <Header></Header>
      </el-header>
      <el-container>
        <!-- <div class="collapse-box-home" @click="collapse = !collapse" :style="!collapse?'left:230px;':'left:70px;'">
          {{collapse?'》':'《'}}
        </div> -->
        <el-aside  :width="!collapse?'230px':'70px'" style="overflow: hidden;">
          <div class="sidebar">
            <!-- <a href="javascript:;" @click='collapse = !collapse'>cs</a> -->
            <el-menu
              :default-active="$route.path"
              router
              unique-opened
              :collapse="collapseDom"
              :style="!collapse?'width:230px;':'width:70px;'"
            >
            <!-- :collapse="collapse" -->
              <NavMenu :navMenus="menuData" :collapse='collapse'></NavMenu>
            </el-menu>
          </div>
        </el-aside>
        
        <el-container>
          <transition name="el-zoom-in-center">
            <div class="massage-box-transition" v-if='msgFlag'>
              <span class="close-button" @click='closeMsg'><i class="el-icon-close"></i></span>
              <div class="contents-box-transition"><marquee direction="left" scrolldelay="500" scrollamount='40' behavior='scroll'><i class="iconfont icon-xiaoxi" style="vertical-align: middle;"></i> {{contentsText}}</marquee></div> 
            </div>
          </transition>
          <el-main>
          <!-- <transition name="slide-fade"> -->
            <router-view to="/overview" ></router-view>
          <!-- </transition> -->
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import NavMenu from '@/components/Sidebar.vue'
import baseTable from '../components/common/baseTable'
import { setTimeout } from 'timers';
export default {
  name: 'Home',
  components: {
    baseTable,
    Header,
    NavMenu
  },
  data() {
    return {
      userType:localStorage.getItem('userType'),
      activeIndex:'',
      menuData: [],
      msgFlag:false,
      closeFlag:true,
      contentsText:'',
      collapse:false,
      collapseDom:false
    }
  },
  watch:{
    collapse:{
      handler(nv,ov){
        setTimeout(()=>{
          this.collapseDom = nv
        },500)
      },
      deep:true
    }
  },
  created(){
  },
  destroyed(){
  },
  mounted(){
    this.pushnewsGetPushNewsContents()
    this.init()
    this.initMenu();
    window.addEventListener('resize', (e) => {
      if(document.querySelector('.el-aside')){
        document.querySelector('.el-aside').style.height = `${document. documentElement.clientHeight-70}px`;
      }
      if(document.querySelector('.el-main')){
        document.querySelector('.el-main').style.height = `${document. documentElement.clientHeight-70}px`;
      }
    }, false);
  },
  methods: {
    async pushnewsGetPushNewsContents(){
      if(this.closeFlag){
          let res = await this.API.pushnewsGetPushNewsContents({
            domain:window.location.host
          })
          if(res && res.contents){
            this.msgFlag = true
            this.contentsText = res.contents
          }
          setTimeout(()=>{
            this.pushnewsGetPushNewsContents()
          },1000*60*5) //5分钟请求一次顶部消息提示
      }
    },
    closeMsg(){
      this.closeFlag = false
      this.msgFlag = false
    },
    async initMenu(){
      let res = await this.API.getMenuList({});
      if(res){
        if(this.userType!=5){
          res.unshift({sid: "1",spid:'0', menuName: this.$t('index.overview'), menuURL:'/overview_agent.vue'});
        }else if(this.userType==1||this.userType==5){
          res.unshift({sid: "2",spid:'0', menuName: this.$t('index.overview'), menuURL:'/overview.vue'});
        }
        var arr1=[],arr2=[];
        res.forEach(item => {
          if(item.menuURL){
            var menuUrl=item.menuURL;
            var startIndex=menuUrl.lastIndexOf('/');
            var endIndex=menuUrl.lastIndexOf('.');
            item.menuURL=menuUrl.substring(startIndex,endIndex);
          }
          if(item.spid==0){
            if(item.isLeaf==0){
              item.childs=[];
            }
            arr1.push(item);
          }else{
            arr2.push(item);
          }
        });
        arr1.forEach(obj=>{
          arr2.forEach(subObj=>{
            if(obj.isLeaf==0){
              if(subObj.spid==obj.sid){
                obj.childs.push(subObj);
              }
            }
          })
        })
        this.menuData=arr1;
      }
    },
    init(){
      document.querySelector('.el-aside').style.height = `${document. documentElement.clientHeight-70}px`;
      document.querySelector('.el-main').style.height = `${document. documentElement.clientHeight-70}px`;
    }
  },
}
</script>
<style lang="less">
.collapse-box-home{
    width: 30px;
    height: 25px;
    position: fixed;
    z-index: 9999;
    background-color: #394456;
    color: #fff;
    left: 230px;
    border-radius: 0px 13px 13px 0px;
    transition: all .5s;
}
.home{
  min-width: 1100px;
  .el-aside,
  .el-menu
  {
    transition: all .5s;
  }
  
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height:100%;
}
.sidebar{
  
  // width: 250px;
  .el-menu{
    // width: 230px;
    // transition: all .5s;
  }
  
}

.el-header {
  padding: 0;
  height: auto;
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .1s ease;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(500px);
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateX(-500px);
  opacity: 0;
}
.massage-box-transition{
  width: calc(100% - 230px);
  height: 22px;
  background-color:rgba(246, 211, 129, 0.61);
  // margin-top:-22px;
  position:absolute;
  font-size: 12px;
  z-index: 1001;
  .close-button{
    float:right;
    margin-right:15px;
    font-size: 14px;
  }
  .contents-box-transition{
    float: left;
    width: calc(100% - 30px);
  }
}
</style>
